<template>
	<view class="p-50 p-t-0 left psr">
		<text class="ts-46 tb wa left m-t-30">
			<text class="tc-green">设置密码</text>
		</text>
		<br>
		<scroll-view scroll-y="true">
			<form>
				<view class="form-item" style="margin-top: 55rpx;">
					<input style="padding-left: 126rpx; width: 522rpx;" disabled class="form-input" type="text" v-model="mobile" placeholder="请输入手机号"/>
					<input class="form-count" value="+86" disabled />
				</view>
				<view class="form-item">
					<input style="width: 380rpx; float: left;" class="form-input" type="text" v-model="code" placeholder="验证码"/>
					<view class="form-input form-input-btn" @click="sendCode()">
						{{ disabledBtn ? code_num + 's' : '发送验证码' }}
					</view>
				</view>
				<view class="form-item">
					<input class="form-input" type="text" v-model="password" placeholder="请输入新的登录密码"/>
				</view>
			</form>
		</scroll-view>
		<view class="form-submit" @click="formSubmit()">
			提交
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import http_config from '@/config/http'; 
	export default {
		data() {
			return {
				code: '',
				password: '',
				code_num: 60,
				disabledBtn: false,
				timer: null
			}
		},
		computed: {
			...mapState(['user']),
			mobile() {
				console.log(this.user.info.mobile)
				return this.$xyfun.maskPhone(this.user.info.mobile)
			}
		},
		async onLoad() {
			this.$xyfun.setNavBar(' ');
		},
		onshow() {
			clearInterval(this.timer);
		},
		methods: {
			sendCode() {
				// console.log(this.user.info.mobile)
				if(!this.disabledBtn) {
					this.disabledBtn = true
					this.timer = setInterval(function() {
						if (that.code_num == 0) {
							that.disabledBtn = false
							that.code_num = 60
						} else {
							that.code_num--
						}
					}, 1000);
					let that = this
					this.$api.get({
						url: '/user/user/sendCode',
						loadingTip:'加载中...',
						data: {
							mobile: this.user.info.mobile,
						},
						success: res => {
							console.log(res)
						}
					});
				}
			},
			// 保存
			async formSubmit() {
				this.$api.post({
					url: '/user/user/changePassword',
					loadingTip:'加载中...',
					data: {
						code: this.code,
						mobile: this.user.info.mobile,
						password: this.password,
					},
					success: res => {
						this.$xyfun.msg('修改密码成功')
						this.$store.dispatch('user/getInfo')
						setTimeout(() => {
							uni.navigateTo({
								url: `/pages/user/system`
							})
						}, 0)
					}
				})
			},
			
		}
	}
</script>

<style scoped lang="scss">
	.form-submit {
		margin: 35rpx 0 50rpx;
		width: 649rpx;
    	height: 100rpx;
		border-radius: 15rpx;
		background-color: rgba(0,86,80,1);
		text-align: center;
		color: white;
		line-height: 95rpx;
		float: left;
	}
	.form-item {
		width: 100%;
		position: relative;
		margin-top: 35rpx;
		float: left;
		.form-item-title {
			left: 26rpx;
			top: 30rpx;
			color: rgba(102, 102, 102, 0.87);
		}
		.form-item-pic {
			border: 1rpx solid rgba(111, 111, 111, 0.31);
			height: 450rpx; 
			border-radius: 15rpx; 
			overflow: hidden;
			.form-item-pic1 {
				border: 1rpx dashed rgba(187,187,187,0.31); 
				height: 330rpx; 
				border-radius: 15rpx; 
				width: 590rpx;
				margin: 25rpx;
				line-height: 329rpx;
				margin-top: 90rpx;
			}
			.form-item-open {
				height: 330rpx; 
				margin: 25rpx;
				width: 590rpx;
				margin-top: 90rpx;
			}
			.form-item-del {
				top: 30rpx;
				right: 50rpx;
			}
			.form-item-img {
				width: 50rpx;
				height: 50rpx;
			}
			.form-item-sf {
				width: 500rpx;
				height: 290rpx; 
			}
		}
		.form-input {
			width: 622rpx;
			height: 100rpx;
			border-radius: 15rpx;
			background-color: rgba(255,255,255,1);
			border: 1rpx solid rgba(111, 111, 111, 0.31);
			padding-left: 26rpx;
		}
		.form-input-btn {
			width: 210rpx; 
			float: right; 
			padding: 0; 
			text-align: center; 
			line-height: 96rpx;
		}
		.placeholder-color {
			color: rgba(135,135,135,0.48);
		}
		.form-count {
			position: absolute;
			width: 60rpx;
			height: 100rpx;
			top: 0rpx;
			left: 50rpx;
			border-top: 1rpx solid rgba(111, 111, 111, 0.31);
			border-bottom: 1rpx solid rgba(111, 111, 111, 0.31);
			background-color: rgba(255,255,255,1);
		}
	}
</style>